<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>黑手</title>
</head>
<body>
    <form action="/" method="post">
        <label for="name">用户名</label>
        <input type="text" id="name" name="name" required>
        <br>

        <libel for="password">密码：</libel>
        <input type="password" id="password" name="password" required>
        <br>

        <label>性别：</label>
        <input type="radio" id="male" name="gender" value="male" checked>
        <label for="male">男</label>
        <input type="radio" id="female" name="gender" value="female">
        <label for="male">女</label>

        <br>

        <input type="checkbox" id="subscribe" name="subscribe" checked>
        <label for="subscribe">订阅推送消息</label>

        <br>

        <label for="country">国家</label>
        <select id="country" name="country">
            <option value="cn">CN</option>
            <option value="usa">USA</option>
            <option value="uk">UK</option>
        </select>

        <br>
            <label for="">爱好</label>
            <input type="checkbox" name="vehicle[]" value="Bike">我喜欢自行车<br>
            <input type="checkbox" name="vehicle[]" value="Car">我喜欢小汽车
        <br>
        inout
        <button type="submit" value="submit" style="background-color: aquamarine;
                                                        font-size: 16px;
                                                        width: 870px;
                                                        margin: 10px 0 0 0;
                                                        font-weight: 700;
                                                        border-radius: 3px;
                                                        color: white;
                                                        padding: 7px 10px 7px 10px;
                                                        border: 1px solid rgd(102,140,36);
                                                        ">提交</button>
    </form>
    <div style="background: #fff;color: #1f1f1f;">
        <span style="font-size: 50px;color: #1f1f1f;">
            中国大陆
        </span>
        <span style="color: #1f1f1f;font-size: 50px;color: #ff5000;margin: left 10px;">亲，请登录&nbsp;免费注册</span>
    </div>
    <div class="title">沪爷专属菜单</div>
    <div class="content">
        <div class="left-content">蒸熊掌
            <p>蒸鹿尾</p>
            <p>烧花鸭</p>
            <p>蒸羊羔</p>
            <p>松花小肚儿</p>
            <p>烧雏鸡</p>
            <p>清蒸八宝猪</p>
            <p>焖黄鳝</p>
            <p>炒蟹肉</p> 
            <p>四喜丸子</p>   
        </div>
        <div class="right-content">1800元/份
            <p>2588元/份</p>
            <p>688元/份</p>
            <p>3688元/份</p>
            <p>1688元/份</p>
            <p>588元/份</p>
            <p>4488元/份</p>
            <p>1788元/份</p>
            <p>2888元/份</p>
            <p>988元/份</p>
        </div>
    </div>
    <div class="footer">总价：            </div>
     <p class="change_color">装逼让你飞起来</p >
     <div class="ALL_thrre">
          <p class="o1ympicGames"></p >
          <p class="o1ympicGames_Two"></p >
          <p class="o1ympicGames_three"></p >
          <p class="o1ympicGames-four"></p>
          <p class="o1ympicGames-five"></p>
          <p style="background-color: black;color: aliceblue;">你好<br>装逼让你飞起来</p>
          <p>装逼<span style="white-space: pre ;"> 让你&nbsp;飞起来&nbsp;！！！</span></p>
          <p>给我&nbsp;高高&nbsp;飞起来啊</p>
          <ul>
            <li>圣马蒂诺</li>
            <li>安东尼是</li>
            <li>阿萨的吧</li>
            <li>奥多姆</li>
            <li>世界帝国</li>
          </ul>
          <ol>
            <li>圣马蒂诺</li>
            <li>安东尼是</li>
            <li>阿萨的吧</li>
            <li>奥多姆</li>
            <li>世界帝国</li>
          </ol>
          <table border="1">
            <canvas>表格标题</canvas>
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
            </tr>
            <tr>
                <td>row1,cell 2</td>
                <td>row1,cell 1</td>
            </tr>
            <tr></tr>
                <td>row 2,cell 1</td>
                <td>row 2,cell 2</td>           
          </table>
   </div>
   <h1>装逼！！！</h1>
   <h2>让你飞起来</h2>
   <h3>黑手</h3>
   <h4>装逼让你飞起来</h4>
   <h5>起飞</h5>
   <h6>这是一个标签</h6>
   <div></div>
   <p>这是一个段落</p>
   <img src="https://img.alicdn.com/imgextra/i4/812912687/O1CN01oyDs6J1VihEYqG8jC_!!812912687.jpg_q50.jpg_.webp"height="320" width="280">
   <p>将鼠标移上并点此链接：
    <a href="https://www.baidu.com/">百度.com</a></p>
   <style>
    
    .title{
        font-size: 30px;
        border: 1px solid red;
        background: brown;
        text-align: center;
    }
    .content{
        display: flex;
    }
    .left-content{
        border: 1px solid red;
        background-color: yellow;
        height: 3x;
        width: 30%;
    }
    .right-content{
        border: 1px solid purple;
        background-color: seashell;
        width: 70%;
    }
    .footer{
        border: 1px soli green;
        background: green;
        text-align: center;
        height: 50px;
        font-size: 30px;
    }
    .change_color{
        color: crimson;
         /* 增加素像框 px代表像素 dashed虚线   solid代表实线    green代表绿色*/
         border: 1px dashed red;
        /*增加背景颜色*/
        background-color: blue;
        /*文本居中*/
        text-align: justify;
        /*宽度*/
        width: 500px;
        /*高度*/
        height: 500px;
        /*居中*/
        margin: 0 auto;
        /*边框半径*/
        border-radius: 50px;
        /*字体大小*/
        font-size: 50px;
        /*外边距*/
        margin: 10px 5px 15px 20px;
        /*内边距*/
        padding: 10px;
    } 
    .change_color:hover{
        background:green ;
        width: 200px;
        height: 300px;
        font-size: 200px;
    }
    .ALL_three{
        display: flex;
    }
    .o1ympicGames{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 2px solid blue;
    }
    .o1ympicGames_Two{
        width: 50px;
        height: 50px;
        border-radius:50%;
        border: 2px solid black;
        margin-left: 40px;
        margin-top: -68px;
    }
    .o1ympicGames_three{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 2px solid red;
        margin-left: 70px ;
        margin-top: -68px;
    }
    .o1ympicGames-four{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 2px solid purple;
        margin-left: 50px;
        margin-top: -35PX;   
    }
    .o1ympicGames-five{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 2px solid green;
        margin-left: 10PX;
        margin-top: -70PX;
        }
            

</style>
</body>
</html>